<template>

  <div class="content">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>对账管理</a-breadcrumb-item>
        <a-breadcrumb-item>异常订单</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item" style="padding-top: 20px;">
          <div style="margin: 0 50px">进场时间</div>
          <template>
            <div class="button_time">
<!--              <a-button type="primary" @click="button_time(5)" :style="computedStyle(4)">所有</a-button>-->
              <a-button type="primary" @click="button_time(0)" :style="computedStyle(0)">今天</a-button>
              <a-button type="primary" @click="button_time(1)" :style="computedStyle(1)">昨天</a-button>
              <a-button type="primary" @click="button_time(2)" :style="computedStyle(2)">本周</a-button>
              <a-button type="primary" @click="button_time(3)" :style="computedStyle(3)">上周</a-button>
              <a-button type="primary" @click="button_time(4)" :style="computedStyle(4)">本月</a-button>
            </div>
          </template>
          <template>
            <div style="margin: auto 50px">
              <a-range-picker
                      id="range-picker"
                      :showTime="{
                                        format: 'HH:mm:ss'
                                    }"
                      format="YYYY-MM-DD HH:mm"
                      :placeholder="['开始时间', '结束时间']"
                      @ok="onOk"
                      @change="onChange"
                      :value="rangePickerValue()"/>
            </div>
          </template>
        </div>

        <div class="box-condition-item">
          <template>
            <div style="margin: 0 50px">异常类型:</div>
            <a-select
                    showSearch
                    placeholder="异常类型"
                    style="width: 200px"
                    @change="changeType">
              <a-select-option v-for="a in exceptionOrderType" :key="a.key" :value="a.key">{{a.value}}
              </a-select-option>
            </a-select>
          </template>
        </div>

      </div>
    </div>

    <!--表单-->
    <div class="box-form">
<!--      工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
<!--          <a-button type="primary" @click="finishExceptionOrder()">订单作废</a-button>-->
            <template v-if="selectedRowKeys.length != 0">
                <a-popconfirm
                        title="确认删除？"
                        okText="确认"
                        cancelText="取消"
                        @confirm="deleteClick"
                        placement="topLeft"
                >
                    <a-button type="primary">订单作废</a-button>
                </a-popconfirm>
            </template>
            <template v-else>
                <a-button type="primary" @click="deleteClick">订单作废</a-button>
            </template>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
                 rowKey="no"
                 :rowSelection="{
                    selectedRowKeys: selectedRowKeys,
                    onChange:onSelectChange,
                    columnWidth: '3.5%',
                  }"
                 :columns="columns"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 bordered size="small"
                 :scroll="scroll"
                 @change="tableChange">

            <template slot="operation" slot-scope="text">
                <div class="operation">
                    <a-button @click="finishExceptionOrder(text)"> 作废订单 </a-button>
                </div>
            </template>
        </a-table>
      </div>
    </div>
  </div>

</template>

<script>
  import moment from 'moment';
  import exception_api from '../../api/system/ExceptionOrderManage';

  // 标题行
  const columns = [
    {
      title: "车牌号",
      dataIndex: "licencePlate",
      width: "10%",
    },
    {
      title: "停车场",
      dataIndex: "parkName",
      width: "11%",
    },
    {
      title: "泊位",
      dataIndex: "truckSpaceName",
      width: "15%",
    },
    {
      title: "进场时间",
      dataIndex: "startTime",
      width: "15%",
      sorter: () => {},
    },
    {
      title: "离场时间",
      dataIndex: "endTime",
      width: "15%",
      sorter: () => {},
    },
    {
      title: "备注",
      dataIndex: "remark",
      width: "20%",
    },
      {
          title: "操作",
          scopedSlots: { customRender: "operation" },
      }
  ];

  const dataSource = [];

  const queryCondition = {
    type: "1",
    limit: "100",
    curr: "1",
    timeScreenCondition: "0",
    startTime: "",
    endTime: ""
  };

  export default {
    name: "membership",
    data() {
      return {
        /**表格**/
        columns: columns,
        dataSource: dataSource,
        /*分页插件*/
        pagination: {
          showTotal: total => `共${total}条`,
          total: 0,
          current: 1,
          defaultCurrent: 1,
          showQuickJumper: true,
          defaultPageSize: 100
        },
        /*表格固定头部*/
        scroll: {
          y: 550,
        },
        tableState: {
          rowId: -1,
        },
        /* 表单选择 */
        selectedRowKeys: [] /* 选择key */,
        /*当前选中的行数据*/
        currRowData: "",
        /**下拉框**/
        allowClear: true,
        /**按钮**/
        /*收费时间按钮*/
        selectId: -1,
        selectIdPop: -1,
        /**日期控件**/
        /*入场时间日期*/
        momentArr: [],
        momentArrPop: [],
        /**文本框**/
        queryCondition,
        /**查询条件**/
        inputType: "",
        exceptionOrderType: [
          { key: 1, value: "同车不同位" },
          { key: 2, value: "同位不同车" },
        ],
      };
    },

    methods: {
        /* ---------------- 选中处理 ------------------- */
        getSelectArray() {
            let dataSource = this.dataSource || [];
            let selectedRowKeys = this.selectedRowKeys;
            return dataSource.filter((item) => {
                return selectedRowKeys.filter((no) => no == item.no).length > 0;
            });
        },

        clearSelectArray() {
            this.selectedRowKeys = [];
        },

     /* 订单作废 */
     finishExceptionOrder(row) {
         exception_api.finishExceptionOrder({
             id: row.id,
         })
         .then((data) => {
             if (data.code == 2000) {
                 this.$message.warn("订单作废成功！" );
                 this.queryData();
             }
         })
         .catch((err) => {
             this.$message.warn("订单作废失败！:" + err.data);
         });
     },

     /* 批量作废订单 */
    deleteClick() {
        let selectArray = this.getSelectArray();
        if (selectArray.length == 0) {
            this.$message.error("请至少选中一个");
            return;
        }
        let value = JSON.stringify(
            selectArray.map((item) => {
                return { id: item.id };
            })
        );
        exception_api.finishExceptionOrders(value)
            .then((data) => {
                if (data.code === 2000) {
                    this.$message.success("订单作废成功！");
                    this.queryData();
                }
            })
            .catch((err) => {
                this.$message.warn("订单作废失败:" + err.data);
            });
    },

      /* 多选框 */
     onSelectChange(selectedRowKeys){
         this.selectedRowKeys = selectedRowKeys;
     },

      /**组件部分相关方法**/
      tableChange(page) {
        this.queryCondition.curr = page.current;
        this.queryData();
        this.queryCondition.curr = 0;
      },

      /**按钮以及日期控件**/
      button_time(e) {
        this.selectId = e;
        let momentStart;
        let momentEnd;
        switch (e) {
          case 0:
            momentStart = moment().startOf('day');
            momentEnd = moment().endOf('day');
            break;
          case 1:
            momentStart = moment().add('day', -1).startOf('day');
            momentEnd = moment().add('day', -1).endOf('day');
            break;
          case 2:
            momentStart = moment().week(moment().week()).startOf('week');
            momentEnd = moment().week(moment().week()).endOf('week');
            break;

          case 3:
            momentStart = moment().week(moment().week() - 1).startOf('week');
            momentEnd = moment().week(moment().week() - 1).endOf('week');
            break;
          case 4:
            momentStart = moment().month(moment().month()).startOf('month');
            momentEnd = moment().month(moment().month()).endOf('month');
            break;
          case 5:
            break;
          default :
            break;
        }
        this.momentArr[0] = momentStart;
        this.momentArr[1] = momentEnd;
        this.queryData();
      },
      clearSelect() {
        this.currRowData = "";
        this.tableState.rowId = "";
      },

      /* ---------------------- 条件筛选 ---------------------- */
      onChange(dates) {
        this.momentArr = dates;
      },
      onOk(value) {
        this.momentArr = value;
        this.queryData();
      },
      rangePickerValue() {
        return this.momentArr;
      },
      rangePickerValuePop() {
        return this.momentArrPop;
      },
      setTime(fmt) {
        const time = new Date(fmt);
        const Y = time.getFullYear()
        const M = (time.getMonth() + 1).toString().padStart(2, '0')
        const D = time.getDate().toString().padStart(2, '0')
        const h = time.getHours().toString().padStart(2, '0')
        const m = time.getMinutes().toString().padStart(2, '0')
        const s = time.getSeconds().toString().padStart(2, '0')
        return `${Y}-${M}-${D} ${h}:${m}:${s}`
      },
      /** 操作相关(crud) **/
      queryData() {
        let condition = this.getQueryCondition();
        exception_api.getExceptionOrder(condition)
                .then((data) => {
                  let {list, total, pageNum, pageSize} = data.data;
                  let array = list || [];
                  array = array.map((item, index) => {
                    return {...item, no: total - (pageNum - 1) * pageSize - index}
                  });
                  this.dataSource = array;
                  this.pagination.total = total;
                  this.pagination.current = pageNum;
                }).catch(err => {
          console.log("获取异常订单列表异常！", err.data);
        });
      },
      getQueryCondition() {
        let condition = this.queryCondition;
        let startTime = "";
        let endTime = "";
        if (this.momentArr != undefined && this.momentArr.length != 0 && this.momentArr[0] != undefined) {
          condition.timeScreenCondition = "6";
          startTime = this.setTime(this.momentArr[0]);
          endTime = this.setTime(this.momentArr[1]);
        } else {
          condition.timeScreenCondition = "0";
        }
        condition.startTime = startTime;
        condition.endTime = endTime;
        condition.type= this.inputType;
        return condition;
      },
      changeType(obj){
        this.inputType = obj;
        this.queryData();
      },
    },

    computed: {
      computedStyle() {
        return function (selectId) {
          return this.selectId == selectId ? "" : "";
        }
      }
    },

    /*页面初始化渲染后执行*/
    mounted() {
      this.queryData();
    }

  }
</script>

<style scoped>
  .ant-table td {
    white-space: nowrap;
  }

  .content {
    width: 100%;
    height: 100%;
  }

  .header-setting {
    width: 100%;
    height: 174px;
    background: #fff;
  }

  .header-setting .breadcrumb {
    margin-left: 41px;
    padding-top: 15px;
  }

  /*表格行选中背景颜色*/
  .clickRowStyl {
    background-color: #C1E0FD;
  }

  .box-condition-body {
    padding-left: 40px;
    padding-right: 40px;
    background: #fff;
  }

  .box-condition-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .button_time {
    margin-left: 100px;
    display: flex;
  }

  .button_time button {
    margin-right: 10px;
  }

  /* 表单 */
  .box-form {
    padding-left: 40px;
    padding-right: 40px;
    min-height: 705px;
    background: #fff;
    margin-top: 8px;
  }

  .box-form .box-tool {
    padding-top: 11px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .box-form .box-table {
    margin-top: 12px;
  }

  .box-tool button {
    margin: 0 0 0 10px;
  }

  /*轮播*/
  .modalBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .modalBox .playImg {
    position: relative;
    width: 60%
  }

  .modalBox .fromBox {
    width: 35%
  }

  .modalBox .fromBox input {
    margin-bottom: 15px;
  }

  .modalBox .playImg ul.imgList {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }

  .modalBox .playImg .img {
    width: 100%;
    height: 200px;
  }

  .modalBox .playImg .img img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .modalBox .playImg .pointBox {
    position: absolute;
    bottom: 10px;
    width: 100%;
  }

  .modalBox .playImg .pointBox ul {
    display: flex;
    justify-content: center;
  }

  .modalBox .playImg .pointBox li.point {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 0 10px;
    background: #000;
  }

  .modalBox .playImg .pointBox li.active {
    background: #ff7255;
  }

  .array {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    opacity: 1;
    position: absolute;
    font-size: 30px;
  }

  .array .left, .array .right {
    color: #fafafa;
    cursor: pointer
  }

  /*.array .right{color:#999;cursor:pointer}*/
  .array .left:hover {
    color: #333;
  }

  .array .right:hover {
    color: #333;
  }

  /* box-correction-popup */
  .box-correction-popup {
    padding: 20px;
    height: 555px;
    /* flex */
    display: flex;
    align-items: center;
  }

  .box-correction-popup .box-image {
    padding: 0 15px;
    width: 888px;
    height: 500px;
  }

  .box-correction-popup .box-image .icon-image {
    width: 100%;
    height: 100%;
  }

  .box-correction-popup .box-correct {
    margin: 0 15px;
    width: 310px;
    height: 500px;
  }

  .box-correction-popup .box-correct .item-correct {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .box-correction-popup .box-correct .item-correct .text-correct {
    font-weight: 300;
    font-size: 14px;
    width: 100px;
  }

  .box-correction-popup .box-correct .item-correct .text-value {
    font-weight: 300;
    font-size: 14px;
    line-height: 1.428571429;
    color: #020202;
  }

  /* box-dispatch-item */
  .box-dispatch-item {
    display: flex;
    align-items: center;
  }

  .box-dispatch-item .text-key {
    width: 200px;
    /* text */
    font-size: 14px;
    font-weight: 300;
    color: #797979;
  }

  .box-dispatch-item .text-value {
    width: 265px;
  }
</style>
